<template>
  <div class="devices-search">
    <!-- 筛选 -->
    <div class="filter">
      <div class="hasSelect" v-show="levelList.filter(res=>res.name).length">
        <span class="nor">已选条件</span>
        <span class="sel" v-for="(item,index) in levelList.filter(res=>res.name)" :key="index">
          <span @click="clickDevice(item)">{{item.name}}</span>
          <i class="el-icon-close" @click="deleteDevice(index)"></i>
        </span>
        <span class="clearAll" @click="clearAll">清除全部</span>
      </div>
      <div class="condition">
        <div class="area">
          <div>
            <div class="classification">库房类型</div>
            <div
              :class="!deviceOptions.some(res=>res.value) ? 'active all': 'all'"
              @click="clearAll"
              style="width:70px"
            >全部</div>
          </div>
          <div>
            <el-select
              v-model="item.value"
              v-for="(item,index) in deviceOptions"
              :key="index"
              size="mini"
              style="width:100px;margin:0px 4px"
              @change="changeIndex($event,item,index)"
              :placeholder="getChinsesValue(index + 1) + '级仓库'"
              :clearable="true"
            >
              <el-option
                v-for="(deveiceItem,deviceIndex) in item.children"
                :key="deviceIndex"
                :label="deveiceItem.name"
                :value="deveiceItem.name"
              ></el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Config from "@/config";
import { mapGetters } from "vuex";

export default {
  name: "SearchStore",
  data: function() {
    return {
      deviceOptions: [],
      levelList: [],
      storename: ""
    };
  },

  computed: {
    ...mapGetters("user", {
      role: "getRole",
      user: "getUser"
    })
  },
  async created() {
    await this.getnumberOptions();
    await this.getAllOPtions(
      this.role[0].sort >= 93 ? "华强" : this.user.name,
      0
    );
  },
  methods: {
    // 库位等级
    getnumberOptions() {
      const url = `${Config.DEVICE_MANAGE_URL}/storehouses/group_by_level?&devtype=${Config.objType.devtype}`;
      var param = {};
      if (this.role[0].sort === 93) {
        param.housetype = "test";
      } else if (this.role[0].sort !== 100) {
        param.housetype = "official";
      }
      this.$http
        .get(url, param)
        .then(res => {
          res.array
            .filter(res => res.store_level !== 0)
            .forEach((value, i) => {
              this.deviceOptions[i] = {};
              this.deviceOptions[i].value = "";
              this.deviceOptions[i].children = [];
              this.levelList[i] = {};
              this.deviceOptions[i].name = "";
            });

          this.$forceUpdate();
        })
        .catch(res => {});
    },
    // 显示
    clickDevice(item) {
      this.$emit("change", item.name);
    },
    // 单个删除
    deleteDevice(index) {
      for (var i = index; i < this.deviceOptions.length; i++) {
        this.deviceOptions[i].value = "";
        this.levelList[i].name = "";
      }
      this.$forceUpdate();
      this.$emit(
        "change",
        this.levelList.slice(-1)[0] && this.levelList.slice(-1)[0].name
      );
    },
    // 全部删除
    clearAll() {
      this.deviceOptions.forEach((res, index) => {
        console.log(res, index);
        res.value = "";
        this.levelList[index].name = "";
      });
      this.$forceUpdate();
      this.$emit("change");
    },
    getChinsesValue(number) {
      switch (number) {
        case 0:
          return "零";
        case 1:
          return "一";
        case 2:
          return "二";
        case 3:
          return "三";
        case 4:
          return "四";
        case 5:
          return "五";
      }
    },
    changeIndex(event, item, index) {
      if (!event) {
        for (var i = index; i < this.deviceOptions.length; i++) {
          this.deviceOptions[i].value = "";
          this.levelList[i].name = "";
        }
        this.$emit(
          "change",
          this.deviceOptions[index - 1] && this.deviceOptions[index - 1].value
        );
        this.$forceUpdate();
        return;
      }
      if (item.value === 0) return;
      console.log(this.levelList);
      this.levelList[index].name = event;
      for (var i = index + 1; i < this.deviceOptions.length; i++) {
        this.deviceOptions[i].value = "";
        this.levelList[i].name = "";
      }
      if (index < this.deviceOptions.length - 1) {
        this.getAllOPtions(
          item.children.find(res => res.name === item.value).name,
          index + 1
        );
      }
      this.$forceUpdate();

      this.$emit("change", item.children.find(res => res.name === event).name);
    },
    getAllOPtions(name, index) {
      const url = `${Config.DEVICE_MANAGE_URL}/storehouses/query_sub_by_name?name=${name}&devtype=${Config.objType.devtype}`;
      var param = {};
      if (this.role[0].sort === 93) {
        param.housetype = "test";
      } else if (this.role[0].sort !== 100) {
        param.housetype = "official";
      }
      this.$http
        .get(url, param)
        .then(res => {
          console.log(res)
          res.array = res.array || [];
          var list = [res.self, ...res.array];
          // console.log(list)
          // this.$parent.filterList = list;
          this.deviceOptions[index].children = [];
          for (var i = 0; i < list.length; i++) {
            if (index === list[i].store_level - 1) {
              this.deviceOptions[index].children.push(list[i]);
            }
          }
          this.$forceUpdate();
        })
        .catch(res => {
          console.log(res);
        });
    }
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
@import "../../../../../static/scss/common.scss";
.devices-search {
  margin-bottom: 24px;
  // 搜索
  .filter {
    width: 100%;
    height: auto;
    background: $white;
    padding: 0px 25px;
    box-sizing: border-box;
    margin-top: 16px;
    .active {
      background: $red;
      // padding: 0px 6px;
      padding: 1px 0px;
      color: $white !important;
      border-radius: 10px;
      text-align: center;
      // min-width: 22%;
    }
    .more-con.active:after {
      content: "";
      margin-left: 4px;
      vertical-align: 0px;
      border: 4px solid transparent;
      border-top-color: #fff !important;
      display: inline-block;
    }
    .hasSelect {
      cursor: pointer;
      padding-bottom: 20px;
      border-bottom: 1px solid #f0f0f0;
      font-size: 12px;
      padding-top: 16px;
      .nor {
        font-size: 14px;
        color: $gray3;
        margin-right: 18px;
      }
      .sel {
        border: 1px solid $red;
        color: $red;
        height: 18px;
        margin-right: 10px;
        padding: 0px 10px;
        border-radius: 10px;
        position: relative;
      }
      // .sel::after {
      //   position: absolute;
      //   display: block;
      //   right: 0;
      //   top: 50%;
      //   transform: translate(0, -50%);
      //   content: " ";
      //   width: 15px;
      //   height: 8px;
      //   background: url("../../../../../static/image/device/sel.png") no-repeat;
      // }
      .clearAll {
        color: $gray9;
      }
    }
    .condition {
      .area {
        padding: 17px 0 0;
        line-height: 20px;
        .classification {
          width: 85px;
          color: $gray3;
          font-size: 14px;
          float: left;
        }
        .all {
          // width: 60px;
          text-align: center;
          color: $gray3;
          float: left;
          font-size: 14px;
          cursor: pointer;
        }

        .more {
          color: $gray6;
          float: left;
          border-bottom: 1px solid #f0f0f0;
          width: 100%;
          padding-bottom: 6px;
          li {
            float: left;
            height: 28px;
            font-size: 14px;
            cursor: pointer;
            min-width: 120px;
            position: relative;
            .more-con,
            .spancolor {
              color: #333;
              display: inline-block;
            }
            .more-con:after {
              content: "";
              margin-left: 4px;
              vertical-align: 0px;
              border: 4px solid transparent;
              border-top-color: $gray6;
              display: inline-block;
            }
            .popover {
              display: none;
              width: 528px;
              position: absolute;
              top: 25px;
              left: 0px;
              z-index: 1000;
              cursor: auto;
              user-select: text;
              white-space: normal;
              font-size: 12px;
              line-height: 1.5;
              font-weight: 500;
              text-align: left;
              background: $white;
              box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
              border: 1px solid #e5e5e5;
              border-radius: 4px;
              .arrow {
                border-width: 5px;
                left: 26px;
                top: -10px;
                position: absolute;
                display: block;
                width: 0;
                height: 0;
                border-color: transparent transparent #e5e5e5;
                border-style: solid;
              }
              .arrow:after {
                display: block;
                width: 0;
                height: 0;
                border-style: solid;
                content: "";
                margin-top: -3px;
                margin-left: -4px;
                border-width: 4px;
                border-color: transparent transparent $white;
              }
              .p-content {
                background-color: #fff;
                background-clip: padding-box;
                border-radius: 4px;
                .popover-content {
                  padding: 24px 0 24px 24px;
                  span {
                    color: #ccc;
                    font-size: 16px;
                    cursor: default;
                    display: block;
                  }
                }
                .clear {
                  padding: 0px 24px 15px 24px;
                  width: 100%;
                  display: inline-block;
                  box-sizing: border-box;
                  li {
                    font-weight: 400;
                    min-width: 25%;
                    margin-bottom: 5px;
                    float: left;
                    line-height: 20px;
                  }
                }
              }
            }
          }
          li:hover .popover {
            display: block;
          }
        }
        .more.bb {
          border: 0;
        }
      }
      .area:after {
        content: "";
        clear: both; /*清除浮动*/
        display: block; /*确保该元素是一个块级元素*/
      }
      .area:last-child {
        // border-bottom: 1px solid rgb(240, 240, 240);
      }
      .area-active {
        height: 52px;
        text-align: center;
        line-height: 52px;
        font-size: 14px;
        color: #333;
      }
      .area-active:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
